<form class="form-horizontal" role="form" #valForm="ngForm">
<div *ngIf="data">
	<div class="form-group">
		<label for="data.billingCycle" class="col-lg-2 control-label">{{('crm.component.node.billingCycle' | translate) || '周期（月）：'}}</label>
		<div class="col-lg-3">
			<input class="form-control" type="text" [(ngModel)]="data.billingCycle" name='data.billingCycle' required number
				placeholder="请输入周期！" [disabled]="data.isDisabled || (this.data.disabledAttr && this.data.disabledAttr.indexOf('billingCycle') > -1)" 
				(change)="billingCycleChanged()"/>									
		</div>
		<label for="data.width" class="col-lg-2 control-label">{{('crm.component.node.width' | translate) || '带宽(Mbps)：'}}</label>
		<div class="col-lg-3">
			<ng-select ngModel [items]="select.speed" [required]="true" [(ngModel)]="data.bandWidth"  name="data.bandWidth"
					placeholder="{{('crm.component.node.interAreaPlaceholder' | translate) || '--请选择--'}}" 
					[disabled]="data.isDisabled || (this.data.disabledAttr && this.data.disabledAttr.indexOf('bandWidth') > -1)" 
					(selected)="getPaymoney()"> </ng-select>						
		</div>				
	</div>
	<div class="form-group">
		<label for="data.cloud.interArea" class="col-lg-2 control-label">{{('crm.component.node.interArea' | translate) || '可用区域：'}}</label>
		<div class="col-lg-3">
			<ng-select ngModel [items]="interAreas" [required]="true" [(ngModel)]="data.cloud.interArea"  name="data.cloud.interArea"
					#interArea placeholder="{{('crm.component.node.interAreaPlaceholder' | translate) || '--请选择--'}}" [disabled]="data.isDisabled" 
					(selected)="getPaymoney()"> </ng-select>	
		</div>
		<label class="col-lg-2 control-label">{{('crm.component.node.slaLevel' | translate) || '网络质量SLA：'}}</label>
		<div class="col-lg-3">
			<label class="radio-inline c-radio">
				<input type="radio" name="data.slaLevel" [disabled]="true" [checked]="data.slaLevel === '1'" (click)="slaClicked('1')"/> 
				<span class="fa fa-check"></span>{{('crm.component.node.slaLevel1' | translate) || '标准'}}
			</label>				
			<label class="radio-inline c-radio">
				<input type="radio" name="data.slaLevel" [disabled]="data.isDisabled" [checked]="data.slaLevel === '2'" (click)="slaClicked('2')"/> 
				<span class="fa fa-check"></span>{{('crm.component.node.slaLevel2' | translate) || '高级'}}
			</label> 
		</div>				
	</div>			
	<div class="panel-heading">{{('crm.component.node.cloud.heading' | translate) || 'VPC路由'}}</div>
	<div class="form-group">
		<label for="data.cloud.outerVlan" class="col-lg-2 control-label">{{('crm.component.node.cloud.outerVlan' | translate) || '服务标记：'}}</label>
		<div class="col-lg-3">
			<input class="form-control" type="text" [(ngModel)]="data.cloud.outerVlan" name='data.cloud.outerVlan' required
				placeholder="Numb：0～4096" [disabled]="data.isDisabled" />
		</div>
	</div>			
	<div class="form-group" *ngFor="let ip of data.cloud.ipseg; let idx = index;">
		<label for="ip.vpcIpSeg" class="col-lg-2 control-label">{{('crm.component.node.cloud.ipseg.vpcIpSed' | translate) || '子网网段和掩码：'}}</label>
		<div class="col-lg-3">
			<input class="form-control" type="text" [(ngModel)]="ip.vpcIpSeg" name='{{idx + "vpcIpSeg"}}' required
				placeholder="A.B.C.D/x" [disabled]="data.isDisabled" />
		</div>
		<label for="ip.gatewayIp" class="col-lg-2 control-label">{{('crm.component.node.cloud.ipseg.gatewayIp' | translate) || '网关地址：'}}</label>
		<div class="col-lg-3">
			<input class="form-control" type="text" [(ngModel)]="ip.gatewayIp" required name='{{idx + "gatewayIp"}}' required 
				placeholder="A.B.C.D" [disabled]="data.isDisabled" />
		</div>
	</div>
</div>	
</form>